<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>

<body>
    <div id="app" class="container">
        <div id="app">
            <input type="text" v-model="n1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" v-model="n2">
            <button class="btn btn-default" @click="calculation">=</button>
            <input type="text" v-model="result">
        </div>


        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    n1: 0,
                    n2: 0,
                    result: 0,
                    opt: "+"
                },
                methods: {
                    calculation() {
                        switch (this.opt) {
                            case '+':
                                this.result = parseInt(this.n1) + parseInt(this.n2);
                                break;
                            case '-':
                                this.result = parseInt(this.n1) - parseInt(this.n2);
                                break;
                            case '*':
                                this.result = parseInt(this.n1) * parseInt(this.n2);
                                break;
                            case '/':
                                this.result = parseInt(this.n1) / parseInt(this.n2);
                                break;
                        }
                    }
                }
            });
        </script>
    </div>
</body>

</html>